
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./index.module.less"
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons"
import React, { Fragment, useState ,useEffect} from 'react'
import {
	Form,
	Input,
	Checkbox,
	Button,
	Toast,

} from 'antd-mobile'
import { login,getinfo,recharge_api_list,recharge_showdoc,fund_transfer } from "@/apis/user.js"

import { message } from "antd";

import money1 from '../../static/icon_transfer_top.png'
import sx from '../../static/icon-recycle.png'

const TIME = 60000; //定义时效性


const DongTai = (props) => {
	const { t } = useTranslation();
	const navigate = useNavigate()
	const [active, serActive] = useState(1);
	const [visible, setVisible] = useState(false)
	const [rate, setRate] = useState(false)
	const [info, setInfo] = useState({name:'',money:''})
	const [items, setItems] = useState([])
	const [formData, setFormData] = useState({ name: '', password: '', checked: false })
	const [form] = Form.useForm()
	useEffect(() => {
		setTimeout(()=>{
			if (window.scrollTo) {
				window.scrollTo(0, 0);
			} else if (document.body.scrollTop) {
				document.body.scrollTop = 0;
			} else {
				document.documentElement.scrollTop = 0;
			}
			document.getElementById('root').scrollIntoView(true);
			document.getElementById('body').scrollIntoView(true);
		},0)
		Toast.show({
			icon: 'loading',
			content: t('login.title53'),//'加载中'
		  })
			// 查看缓存中是否有账号密码
			// let formDataMemo = {}
			// if (localStorage.getItem('formData')) {
			// 	formDataMemo = JSON.parse(localStorage.getItem('formData'))
			// }

			// if (formDataMemo.name && formDataMemo.password && formDataMemo.expirationTime && Date.now() < formDataMemo.expirationTime) {
			// 	setFormData({
			// 		name: formDataMemo.name,
			// 		password: formDataMemo.password,
			// 		checked: true,
			// 	})

			// 	console.log(formData, 'formData')
			// }
			getinfo().then(res => {
				if (res.status.errorCode == 0) {
					setInfo(res.data.member)
				}
			})
			recharge_api_list().then(res => {
				Toast.clear()
				if (res.status.errorCode == 0) {
					setItems(res.data)
				}
			})
		return ()=>{}
	  }, []);


	const onFinish = (values) => {
		console.log(values, 'values')
		/*
			1.调用登录接口
			2.登录成功之后，看其是否勾选了记住密码，如果记住密码则将账号密码缓存在内存中
			3.下次进入秘密
		*/
		login(values).then(res => {
			if (res.code == 200) {
				Toast.show({
					icon: 'success',
					content: this.t('modifypassword.title5'),
				})

				// 如果设置了记住密码，则在登录后将账号密码存储在cookie或storage中，并设置时效性以此来记住密码
				if (formData.checked) {
					localStorage.setItem('formData', JSON.stringify({
						...values,
						expirationTime: Date.now() + TIME,
					}));
				} else {
					localStorage.removeItem('formData')
				}
			} else {
				Toast.show({
					icon: 'fail',
					content: this.t('modifypassword.title6'),
				})

			}
		})

	};

	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo);
	};
	const huizhuan = (current) => {
		Toast.show({
			icon: 'loading',
			content: t('login.title53'),//'加载中'
		  })
		fund_transfer().then(res=>{
			console.log(res)
			if(res.status.errorCode == 1){
				message.success(res.status.msg)
				getinfo().then(res => {
					if (res.status.errorCode == 0) {
						setInfo(res.data.member)
					}
				})
				recharge_api_list().then(res => {
					if (res.status.errorCode == 0) {
						setItems(res.data)
					}
				})
			}else{
				message.info(res.status.msg)
			}
		})
	}

	//   const items = [
	//       { id: 1, label: t('modifypassword.title7'), amount: '0.00' },
	//       { id: 2, label: t('modifypassword.title8'), amount: '7.00' },
	//       { id: 3, label: t('modifypassword.title9'), amount: '5.00' },
	//       // Add more items as needed
	//   ];

	const getmoney = (params,index)=>{
		recharge_showdoc({api_name:params.api_name, transfer_type:1}).then(res => {
			if (res.status.errorCode == 0) {
				items[index].money = res.data
				setItems([...items])
			}
		})
	}
	const getAll = ()=>{
		setRate(true)
		getData(items,0)
	}
	const getData = async (arr,index)=>{
		if(index < arr.length ){
			if(arr[index].money != ''){
				let res = await recharge_showdoc({api_name:arr[index].api_name, transfer_type:1})
				if (res.status.errorCode == 0) {
					items[index].money = res.data
					setItems([...items])
				}
				getData(items,index+1)
			}else{
				getData(items,index+1)
			}
		}else{
			setRate(false)
		}
	}
	useEffect(()=>{
		if (rate) {
	
		}
	},[rate])
	return (
		<React.Fragment>
			<HeaderTitle title={t('moneybao.title1')} right_title={t('agent.title2')} />
			<div className={style['login_box']}>
				<div className={style['bg_class']}>
					<div className={style['flex']}>
						<div className={style['bg_content']}>
							<img src={money1} alt="" style={{ width: '50px' }} />
							<div style={{ color: '#fff' }}>
								<div className={style['flex']} style={{ marginTop: '10px' }}>
									<div style={{ width: '80px', paddingLeft: '10px', fontSize: '10px' }}>
								{t('moneybao.title2')}
								</div> 
								<div style={{ color: "#fbc847", marginLeft: "10px" }}>{info.name || ' '}</div></div>
								<div className={style['flex']} style={{ marginTop: '10px' }}><div style={{ width: '80px', paddingLeft: '10px', fontSize: '10px' }}>
								{t('moneybao.title3')}</div><div style={{ marginLeft: "10px" }}>{info.money || '0.00'}</div></div>
							</div>
						</div>
					</div>
				</div>

				<div className={`${style['tabs']}`} onClick={() => {huizhuan()}}>
					{t('moneybao.title4')}
				</div>

				<div className={style['flex']} style={{margin:'10px'}}>
					<div className={style['flex']}>
						<div className={style['left_label']}></div>
						<div style={{marginLeft:'10px',letterSpacing:'2px',color:'#841616'}}>{t('moneybao.title5')}</div>
					</div>
					<div className={style['flex']} style={{marginLeft:'20px',fontSize:'12px',color:'#9d7201',paddingTop:'3px'}}>
						{t('moneybao.title6')}
					</div>
				</div>
				{items.map((item, index) => (
				<div className={style['item']} key={item.id} style={{backgroundColor:(index+1)%2==0?'#EDEDED':""}}>
					<div yle={{fontSize:'12px'}}>
					{item.api_title || item.api_name}
					</div>
					<div className={style['flex']}>
						<div className={style['flex']} style={{marginRight:'20px'}}>
				
							<span style={{color:"#9d7201",fontSize:'12px',fontWeight:'600',marginRight:'10px'}}>
							{item.money != "" ? item.money : t('moneybao.title8')}
							</span>
					
						{item.money !== "" && (
							<img className={rate ? style['rotate'] : ''} src={sx} alt="" style={{width: '15px',marginRight:'10px'}} onClick={() => getAll(item,index)} />
							// <img src={sx} alt="" style={{width: '15px',marginRight:'10px'}} onClick={() => getmoney(item,index)} />
						)}
						</div>
						{/* <div className={style['money_button']} onClick={() => {huizhuan()}}>{t('moneybao.title7')}</div> */}
					</div>
				</div>
				 ))}
			</div>


		</React.Fragment>


	)
}


export default DongTai
